<template>
	<div class="questions">
		
		<div class="questions-div">
			
			<div class="questions-body jiantou"  v-if="newbody.rule.length > 0" :style="{ backgroundImage:'url('+ body.bag +')' }">
				<div class="tr1"  v-for="(item,index) in newbody.rule" >
					<div class="tr-div"
							:style="{'background':twoitem.ticolor}"
						v-for="(twoitem,twoindex) in item"
						:class="{
							'tr-right' : (index==0 || index==1  || index==3  || index==4  || index==6 ||index == 7 ||index == 8) && (twoindex ==2 || twoindex ==5),
							'tr-below' : (index==2 || index==5) && (twoindex !=2 || twoindex !=5),
							'tr-rightbelow' : (index==2 || index==5) && (twoindex ==2 || twoindex == 5),				
						}"
					>
						<input type="number"  disabled  v-if="twoitem.type==0"  v-model="twoitem.value" />
							<input type="number"
							 :class="index == xindex && twoindex == xindex1  ? 'bagcolor': ''"
							class="pitchon "  disabled  v-if="twoitem.type==1"  v-model="twoitem.newuservalue" />
						
					</div>
					
				</div>
			</div>
		</div>
		
		
	
		
	</div>
</template>

					
<script>
export default {
		props: ['body','index','index1','keys','is_laststep','schedule'],
		watch:{
			keys(e){
				console.log(2212);
				console.log(e);
				var body  = this.newbody['rule'];
				
				
				for(var i=0; i <body.length; i++){
					for(var j=0; j< body[i].length;j++){
						if(e.is_laststep == 1){
							if(e.index == i  &&  e.index1  == j){
								body[i][j]['newuservalue']  = ''; 
							}
						}else if(e.is_laststep == 0){
							if(e.index == -1){
								body[i][j]['newuservalue']  = body[i][j]['uservalue']; 
							}else{
								if(e.index == i  &&  e.index1  == j){
									body[i][j]['newuservalue']  = body[i][j]['uservalue']; 
								}
							}
						}else if(e.is_laststep == 2){
							body[i][j]['newuservalue']  = ''; 
							if(e.index == i  &&  e.index1  == j){
								body[i][j]['newuservalue']  = body[i][j]['uservalue']; 
							}
						}else if(e.is_laststep == 3){
							body[i][j]['newuservalue']  = body[i][j]['uservalue']; 
							
						}
						
						
					}
				}
				this.xindex  = e.index;
				this.xindex1 = e.xindex1;
				this.newbody['rule'] = body;
			},
			body(e){
				this.newbody  =e;
			}
		},
		data() {
			return {
				type : 0,
				xindex : null,
				xindex1 : null,
				newbody :{}
			}
		},
		created() {
			this.newbody =  this.body;
		},
		methods:{
			
		}
	
	}
</script>

<style >
	
	@import url("@/common/css/questions.css");
	.questions {
		display: flex;	
		
	}
	.questions-div {
		width: 738rpx;
		height: 780rpx;
		margin: auto;
	}
	.questions-body {
		width: 738rpx;
		height: 730rpx;
		border: 2rpx solid #000;
		box-shadow: inset 2rpx 2rpx 0 #e3e4e5;
		display: flex;
		flex-direction: column;
	}
	.tr1 {
		display: flex;
		flex: 1;
	}
	.bagcolor {
		background-color: #edff38;
		width: 98% !important;
		height: 98% !important;
	}
	.jiantou {
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	
</style>